<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh-CN">
<head>
    <%@include file="/resource/common/resourceLink.rs" %>
    <title>我的支付宝 - 支付宝</title>
</head>
<style>
    body {
        background-color: #f6f6f6;
    }
    .navbar-nav > li > a {
        /*padding-top: 5px;*/
        padding-bottom: 5px;
    }
    .navbar-brand {
        height: 30px;
        padding-top: 5px;
    }
    .secondNav {
        padding: 0.8% 0;
        font-size: 17px;
    }
    .nav-bottom-myAlipay{
        background: url("/Bank3.0/resource/images/i/bg-nav-sunshine.jpg") no-repeat ;
        height:140px;
        background-position-x: center;
        background-position-y: center;
        background-size: initial;
        background-repeat-x: no-repeat;
        background-repeat-y: no-repeat;
        background-attachment: initial;
        background-origin: initial;
        background-clip: initial;
    }
    .white{
        color: 	#FFFFF0;
    }
    .seventeen{
       font-size: 17px;
    }
    .core-business{
        color: #666;
        background: white;
        border: 1px solid lightgray;
    }
</style>
<body>
	<!-- 顶部导航 -->
    <%@ include file="nav.jsp" %>
    <!-- 第二菜单-->
    <div class="secondNav container-fluid">
        <div class="row">
            <!-- logo图 --->
            <div class="col-md-offset-1 col-md-1 col-xs-2 ">
                <img src="/Bank3.0/resource/images/logo/logo-114.png" style="width: 110%"/>
            </div>
            <div class="col-md-offset-5 col-md-4 col-xs-4">
                <ul class="list-inline">
                    <li><a href="#">我的支付宝</a></li>
                    <li><a href='<c:url value="/transaction/queryRecords/1.htm" />'>交易记录</a></li>
                    <li><a>会员保证</a></li>
                    <li><a>应用中心</a></li>
                </ul>
            </div>
        </div>
    </div><!-- /.secondNav -->
    <!-- 我的支付宝首页导航 -->
    <div class="nav-bottom-myAlipay">
        <!-- 我的支付宝首页顶部导航 -->
        <div class="row" style="background-color: hsla(0,0%,100%,.7);
    box-shadow: 0 1px 2px rgba(0,0,0,.08);">
            <div class="col-md-offset-1 col-md-4">
                <ul class="nav nav-pills pull-left">
                    <li role="presentation" class="active"><a href="#">首页</a></li>
                    <li role="presentation"><a href="#">账户资产</a></li>
                    <li role="presentation"><a href='<c:url value="/updateUser.htm" /> '>账户设置</a></li>
                    <li role="presentation"><a href="#">账户通</a></li>
                </ul>
            </div>
            <!-- 搜索输入输入框 -->
            <div class="col-md-offset-4 col-md-2 ">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="输入关键字，如'密码'" />
                    <span class="input-group-btn">
                <button class="btn btn-default" type="button">
                    <span class="glyphicon glyphicon-search" style="font-size: 20px;"></span>
                </button>
            </span>
                </div><!-- /input-group -->
            </div>
        </div><!--/.row END-->
        <!-- 我的支付宝首页底部导航 -->
        <div class="row " style="padding: 10px 0">
            <div class="col-md-offset-1 col-md-1">
                <img class="img-responsive img-circle" src="/Bank3.0/resource/user/images/user-1.jpg" style="height: 80px;width:80px;">
            </div>
            <div class="col-md-4" style="color: white">
                <p style="padding-bottom: 10px;"></p>
                <p>
                    <span class="seventeen">下午好,${sessionScope.user.userName}</span>
                    <a class="white"> 转账看头像，安全有保障 修改头像</a>
                </p>
                <p>账户名：${cookie.account.value}
                    <span class="glyphicon glyphicon-user" data-toggle="tooltip" data-placement="top" title="已实名认证"></span>
                    <span class="glyphicon glyphicon-phone" data-toggle="tooltip" data-placement="top" title="已绑定手机"></span>
                </p>

            </div>
        </div>
    </div><!-- /.nav-bottom-Alipay -->
    <!-- 核心业务 -->
    <div class="business">
        <div class="row">
            <div class="col-md-offset-1 col-md-4 core-business">.
                <!-- 余额显示 -->
                <div style="padding: 5px 0">
                    <p>账户余额
                        <a href="javascript:queryBalance()">显示余额</a>
                    </p>
                </div>
                <!-- 核心业务具体操作 -->
                <div style="padding-bottom: 10px;">
                    <span>
                        <span class="balance">${sessionScope.user.balance}</span>元
                        <a href='<c:url value="/deposit.htm" /> ' class="btn btn-sm btn-default"><strong>充值</strong></a>
                        <a href='<c:url value="/transaction/withdrawal/index.htm" /> ' class="btn btn-sm btn-default">
                            <strong>提现</strong>
                        </a>
                        <a href='<c:url value="/transfer.htm" /> ' class="btn btn-sm btn-default">
                            <strong>转账</strong>
                        </a>
                    </span>
                </div>
            </div><!-- /.core-business -->
        </div><!-- /.row-->
    </div><!-- /.business -->
</body>
<script>
    $(function () {
        $('[data-toggle="tooltip"]').tooltip();
    })
    
    function queryBalance(){
        $.ajax({
            url:'<c:url value="/transaction/queryBalance/index.htm" />',
            type:'POST',
            async:true,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            data:{
               // account:$("#account").val()
            },
            timeout:3000,
            dataType:'text',
            success:function(data,textStatus) {
            	$('.balance').text(data);
                console.log(data);
               // console.log(textStatus);
            },
            error:function(XmlHttpRequest,textStatus,errorThrown) {
                console.log(XmlHttpRequest);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }
</script>
</html>
